<template>
	<div class="app-container carDevice">
		<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
			<el-form-item label="设备类型" prop="type">
				<el-select v-model="queryParams.type" placeholder="请选择设备类型" clearable size="small">
					<el-option v-for="dict in deviceTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
				</el-select>
			</el-form-item>

			<el-form-item label="设备编号" prop="model">
				<el-input v-model="queryParams.model" placeholder="请输入设备编号" clearable size="small" @keyup.enter.native="handleQuery" />
			</el-form-item>

			<el-form-item label="最后传输">
				<el-date-picker
					v-model="lastDateArr"
					type="datetimerange"
					:picker-options="pickerOptions"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					align="right"
				></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5"><el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['manager:carDevice:add']">新增</el-button></el-col>
			<el-col :span="1.5">
				<el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['manager:carDevice:edit']">修改</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['manager:carDevice:remove']">删除</el-button>
			</el-col>
		</el-row>

		<el-table v-loading="loading" :data="carDeviceList" @selection-change="handleSelectionChange" height="67vh">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="编号" align="center" prop="deviceID" width="100" />
			<!--      <el-table-column label="设备名称" align="center" prop="name" />-->
			<!--      <el-table-column label="所属车辆标识" align="center" prop="carID" />-->
			<el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />

			<!--<el-table-column label="车牌号" align="center" prop="carVin" />-->
			<el-table-column label="设备类型" align="center" prop="type" :formatter="typeFormat" />
			<el-table-column label="厂家品牌" align="center" prop="vender" />
			<el-table-column label="设备型号" align="center" prop="model" />
			<el-table-column label="绑定车辆" align="center" prop="carVin">
				<template slot-scope="scope">
					<span>{{ scope.row.carVin == undefined ? '未绑定' : scope.row.carVin }}</span>
				</template>
			</el-table-column>
			<!--      <el-table-column label="接口类型" align="center" prop="interfaceType" :formatter="interfaceTypeFormat" />-->
			<!--      <el-table-column label="数据类型" align="center" prop="dataType" :formatter="dataTypeFormat" />-->
			<el-table-column label="最后传输时间" align="center" prop="lastTransferTime" width="180">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.lastTransferTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['manager:carDevice:edit']">查看</el-button>
					<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['manager:carDevice:remove']">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
		<!-- 查看详情 -->

		<el-dialog :title="title" :visible.sync="open" width="1600px" append-to-body>
			<el-row class="carDevice-datail" v-if="open">
				<el-row class="carDevice-datail-cont">
					<el-col :span="1" :offset="23" v-if="isShow" class="datail-header-operation" v-show="tableShow"><b @click="submitForm">保存</b></el-col>
					<el-col :span="1" :offset="23" v-if="!isShow" class="datail-header-operation" v-show="tableShow">
						<b @click="handleChange" style="font-size: 18px;">修改</b>
					</el-col>
					<el-row class="datail-box">

						<el-col :span="6">
             <div v-if="isShow">
                <el-upload ref="image" :file-list="form.fieldfileList" :action="imageAction" :before-upload="field105BeforeUpload"
                           :headers="headers" :on-success="quillImgSuccess" :on-remove="removeFormImage" list-type="picture-card"
                           accept="image/*">
                  <i class="el-icon-plus" />
                  <div slot="tip" class="el-upload__tip">
                    只能上传不超过 5MB 的image/*文件
                  </div>
                  <!-- <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button> -->
                </el-upload>
             </div>
              <img class="datail-box-img" :src="form.image" v-if="!isShow" alt="" />
            </el-col>
						<!-- 右 -->
						<el-col :span="18">
							<el-form ref="form" :model="form" :rules="rules" label-width="110px">
								<el-row class="datail-box-list">
									<el-col :span="8">
										<el-col :span="6" class="datail-box-list-trtle">设备编号：</el-col>
										<el-col :span="12" class="datail-box-list-cont">{{ this.form.deviceID }}</el-col>
									</el-col>
									<el-col :span="8">
										<el-col :span="6" class="datail-box-list-trtle">当前状态：</el-col>
										<el-col v-show="isShow" :span="12" class="datail-box-list-cont">
											<!-- <el-form-item label="状态"> -->
											<el-select v-model="form.status" placeholder="请选择状态">
												<el-option
													v-for="dict in statusOptions"
													:key="dict.dictValue"
													:label="dict.dictLabel"
													:value="parseInt(dict.dictValue)"
												></el-option>
											</el-select>
											<!-- </el-form-item> -->
										</el-col>
										<el-col v-show="!isShow" :span="12" class="datail-box-list-cont">{{ statusFormat(this.form) }}</el-col>
									</el-col>
									<el-col :span="8">
										<el-col :span="6" class="datail-box-list-trtle">绑定车辆：</el-col>
										<el-col v-show="isShow" :span="12" class="datail-box-list-cont">
											<!-- <el-form-item label="所属车辆标识" prop="carID"> -->
											<el-select v-model="form.carID" placeholder="请选择绑定救护车">
												<el-option v-for="item in cars" :key="item.carID" :label="item.vin" :value="item.carID" />
											</el-select>
											<!-- </el-form-item> -->
										</el-col>
										<el-col v-show="!isShow" :span="6" class="datail-box-list-cont">
											{{ this.form.carVin == undefined || this.form.carVin == null ? '未绑定' : this.form.carVin }}
										</el-col>
										<el-popover placement="top" width="160" v-model="visible">
											<p>确定解除绑定吗？</p>
											<div style="text-align: right; margin: 0">
												<el-button size="mini" type="text" @click="Oncancel">取消</el-button>
												<el-button type="primary" size="mini" @click="OnConfirm">确定</el-button>
											</div>
											<el-button type="danger" slot="reference" v-show="this.form.carID != null">解绑</el-button>
										</el-popover>
									</el-col>
								</el-row>
								<el-row class="datail-box-list">
									<el-col :span="8">
										<el-col :span="6" class="datail-box-list-trtle">设备类型：</el-col>
										<el-col v-show="isShow" :span="12" class="datail-box-list-cont">
											<el-select v-model="form.type" placeholder="请选择设备类型">
												<el-option
													v-for="dict in deviceTypeOptions"
													:key="dict.dictValue"
													:label="dict.dictLabel"
													:value="parseInt(dict.dictValue)"
												></el-option>
											</el-select>
										</el-col>
										<el-col v-show="!isShow" :span="12" class="datail-box-list-cont">{{ typeFormat(this.form) }}</el-col>
									</el-col>
									<el-col :span="8">
										<el-col :span="6" class="datail-box-list-trtle">厂商品牌：</el-col>
										<el-col v-if="isShow == true" :span="12" class="datail-box-list-cont">
											<el-input v-model="form.vender" placeholder="请输入厂家品牌" />
										</el-col>
										<el-col v-show="!isShow" :span="12">{{ this.form.vender }}</el-col>
									</el-col>
									<el-col :span="8">
										<el-col :span="6" class="datail-box-list-trtle">设备型号：</el-col>
										<el-col v-show="isShow" :span="12" class="datail-box-list-cont"><el-input v-model="form.model" placeholder="请输入设备型号" /></el-col>
										<el-col v-show="!isShow" :span="12" class="datail-box-list-cont">{{ this.form.model }}</el-col>
									</el-col>
								</el-row>
								<el-row class="datail-box-list">
									<el-col :span="8">
										<el-col :span="6" class="datail-box-list-trtle">接口类型：</el-col>

										<el-col v-if="isShow == true" :span="12" class="datail-box-list-cont">
											<el-input v-model="form.interfaceType" placeholder="请输入接口类型" />
										</el-col>
										<el-col v-show="!isShow" :span="12" class="datail-box-list-cont">{{ this.form.interfaceType }}</el-col>
									</el-col>
									<el-col :span="8">
										<el-col :span="6" class="datail-box-list-trtle">数据类型：</el-col>
										<el-col v-show="isShow" :span="12" class="datail-box-list-cont"><el-input v-model="form.dataType" placeholder="请输入数据类型" /></el-col>
										<el-col v-show="!isShow" :span="12" class="datail-box-list-cont">{{ this.form.dataType }}</el-col>
									</el-col>
                  <el-col :span="8">
                    <el-col :span="6" class="datail-box-list-trtle">设备序列号：</el-col>
                    <el-col v-show="isShow" :span="12" class="datail-box-list-cont"><el-input v-model="form.serial" placeholder="请输入数据类型" /></el-col>
                    <el-col v-show="!isShow" :span="12" class="datail-box-list-cont">{{ this.form.serial }}</el-col>
                  </el-col>
								</el-row>
								<el-row class="datail-box-list" style="margin: 0;">
									<el-col :span="24">
										<el-col :span="4" class="datail-box-list-trtle">上次数据传输时间:</el-col>
										<el-col :span="12" class="datail-box-list-cont">{{ this.form.lastTransferTime == undefined ? '暂无' : this.form.lastTransferTime }}</el-col>
									</el-col>
									<el-button plain @click="onplayer()" v-if="!isShow">车载历史数据</el-button>
								</el-row>
							</el-form>
						</el-col>
					</el-row>
					<el-row class="datail-footer" v-show="tableShow">
						<el-row class="datail-footer-title">历史数据记录</el-row>
						<el-table v-loading="loading" :data="deviceDispathList" style="width: 100%" height="430">
							<el-table-column prop="flow" label="调度流水号" width="180" :show-overflow-tooltip="true"></el-table-column>
							<el-table-column prop="leaveHospTime" label="出车时间" width="180">
								<template slot-scope="scope">
									<span>
										{{
											parseTime(scope.row.leaveHospTime, '{y}-{m}-{d} {h}:{i}:{s}') == undefined
												? '暂无'
												: parseTime(scope.row.leaveHospTime, '{y}-{m}-{d} {h}:{i}:{s}')
										}}
									</span>
								</template>
							</el-table-column>
							<el-table-column prop="driverName" label="司机"></el-table-column>
							<el-table-column prop="doctorName" label="医生"></el-table-column>
							<el-table-column prop="patientLocal" label="接车地点"></el-table-column>
							<el-table-column prop="hospital" label="收治医院"></el-table-column>
							<el-table-column prop="caseFlow" label="患者病历"></el-table-column>
						</el-table>
						<pagination
							v-show="total > 0"
							:total="totalforLog"
							:page.sync="queryParamsforLog.pageNum"
							:limit.sync="queryParamsforLog.pageSize"
							@pagination="getCarDeviceLog"
						/>
					</el-row>
				</el-row>
			</el-row>
			<div slot="footer" class="dialog-footer" v-show="!tableShow">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog title="视频回放" :visible.sync="playback" style="margin:0 auto;" append-to-body width="1900px">
			<el-row class="playback">
				<el-row class="palyback-header">
					<el-col class="playback-box" :span="4">
						<span class="playback-box-title">编号：</span>
						<span class="playback-box-cont">{{ this.form.deviceID }}</span>
					</el-col>
					<el-col class="playback-box" :span="4">
						<span class="playback-box-title">状态：</span>
						<span class="playback-box-cont">{{ statusFormat(this.form) }}</span>
					</el-col>
					<el-col class="playback-box" :span="4">
						<span class="playback-box-title">绑定车辆：</span>
						<span class="playback-box-cont">{{ this.form.carVin == undefined || this.form.carVin == null ? '未绑定' : this.form.carVin }}</span>
					</el-col>
					<el-col class="playback-box" :span="4">
						<span class="playback-box-title">设备类型：</span>
						<span class="playback-box-cont">{{ typeFormat(this.form) }}</span>
					</el-col>
					<el-col class="playback-box" :span="4">
						<span class="playback-box-title">厂商品牌：</span>
						<span class="playback-box-cont">{{ this.form.vender }}</span>
					</el-col>
					<el-col class="playback-box" :span="4">
						<span class="playback-box-title">设备型号：</span>
						<span class="playback-box-cont">{{ this.form.model }}</span>
					</el-col>
				</el-row>
				<el-row :span="22" :gutter="1" class="palyback-conter">
					<el-col class="palyback-conter-left">
						<el-row class="palyback-conter-left-header"></el-row>
						<el-row v-if="isType == 1" class="palyback-conter-left-conter" style="width: 1800px;height:900px;transform: scaleX(.78) scaleY(.828);margin:-5.7% 0 0 -15%;background: #00184c;">
							<iframe style="width:1800px;height: 100%;box-sizing: border-box;" :src="xindianUrl" frameborder="0"></iframe>
						</el-row>
						<el-row
							v-if="isType == 2"
							class="palyback-conter-left-conter"
							style="width: 1800px;transform: scaleX(.78);margin-left: -15%;background: #00184c;overflow: hidden;"
						>
							<iframe style="width: 1800px;height: 100%;box-sizing: border-box;padding: 9.7% 0 0 14%;transform: scaleX(1.35) scaleY(1.7);" :src="huxiUrl" frameborder="0"></iframe>
						</el-row>
						<el-row v-if="isType == 4" class="palyback-conter-left-conter" style="background: #00184c;">
							<video id="videoElement" controls width="1400" height="720" v-show="isType == 4">xxx</video>
						</el-row>
					</el-col>
					<el-col class="palyback-conter-right">
						<div class="palyback-conter-right-list scrollBar">
							<div
								class="palyback-conter-right-box"
								v-for="(item, index) in carDispatchDevice"
								:key="index"
								:class="{ addStyle: isAddStyle == index }"
								@click="onplayer(index, item)"
							>
								<div class="box-header">
									<div>调度流水号：{{ item.flow }}</div>
									<div>{{ item.startTime }}</div>
								</div>
								<div class="box-footer">
									<div>{{ item.caseFlow }}</div>
									<div>{{ item.timeQuantum }}</div>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-row>
		</el-dialog>
	</div>
</template>

<script>
import {
	listCarDevice,
	getCarDevice,
	delCarDevice,
	addCarDevice,
	updateCarDevice,
	exportCarDevice,
	carDeviceList,
	unbundleCarDevice,
	getCarDispatchDevice
} from '@/api/biz/carDevice';
import { getCanvasUrl } from '@/api/login';
import { listCar } from '@/api/biz/car';
import { parseTime } from '../../../utils/ruoyi';
import { getToken } from "@/utils/auth";
export default {
	name: 'CarDevice',
	data() {
		return {
			pickerOptions: {
				shortcuts: [
					{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}
				]
			},
      imageAction: process.env.VUE_APP_BASE_API + "/common/upload",
      headers: {
        Authorization: "Bearer " + getToken()
      },
			tableShow: false,
			isShow: false, // 数据框
			visible: false,
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			deviceDispathList: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 调度派车form
			myform: {},
			// 总条数
			total: 0,
			totalforLog: 0,
			// 车载设备管理表格数据
			carDeviceList: [],
			// 弹出层标题
			title: '',
			cars: [],
			// 是否显示弹出层
			open: false,
			// 接口类型字典
			interfaceTypeOptions: [],
			// 数据类型字典
			dataTypeOptions: [],
			deviceTypeOptions: [],
			// 状态字典
			statusOptions: [],

			lastDateArr: [],

			// 查询参数
			queryParams: {
				lastDate: undefined,
				deviceID: undefined,
				pageNum: 1,
				pageSize: 10,
				name: undefined,
				deviceType: undefined,
				carID: undefined,

				carVin: undefined,

				vender: undefined,

				type: undefined,

				model: undefined,

				interfaceType: undefined,

				dataType: undefined,

				status: undefined
			},
			queryParamsforLog: {
				pageNum: 1,
				pageSize: 10,
				deviceID: undefined
			},
			// 表单参数
			form: {
				status: '0'
			},
			// 表单校验
			rules: {
				name: [
					{
						required: true,
						message: '设备名称不能为空',
						trigger: 'blur'
					}
				],
				vender: [
					{
						required: true,
						message: '厂家品牌不能为空',
						trigger: 'blur'
					}
				],

				type: [
					{
						required: true,
						message: '设备类型不能为空',
						trigger: 'blur'
					}
				],

				model: [
					{
						required: true,
						message: '设备型号不能为空',
						trigger: 'blur'
					}
				],

				interfaceType: [
					{
						required: true,
						message: '接口类型不能为空',
						trigger: 'blur'
					}
				],

				dataType: [
					{
						required: true,
						message: '数据类型不能为空',
						trigger: 'blur'
					}
				],

				uid: [
					{
						required: true,
						message: '医院标识不能为空',
						trigger: 'blur'
					}
				],
				serial: [
					{
						required: true,
						message: '设备序列号不能为空',
						trigger: 'blur'
					}
				]
			},
			input: '',
			playback: false, //播放回放弹窗
			xindianUrl: '',
			huxiUrl: '',
			// 视频列表切换
			isType: '',
			// 视频列表
			carDispatchDevice: '',
			isAddStyle: '',
			hsVideoUrl: '',
			player: '',
			tips: false // 提示
		};
	},
	created() {
		this.getDicts('car_deviceType').then(response => {
			this.deviceTypeOptions = response.data;
		});
		this.getDicts('common_status').then(response => {
			this.statusOptions = response.data;
		});

		this.getList();
		this.getCars();
		//测试
		// this.getCarDispatchDevice(1);
		// var player;

		//请求(以后添加 todo)
		// getCanvasUrl().then(res => {
		// 	// alert(111)
		// 	console.log(res.data);
		// });
	},
	mounted() {},
	methods: {
		// 状态字典翻译
		typeFormat(row, column) {
			return this.selectDictLabel(this.deviceTypeOptions, row.type);
		},

		/** 查询车载设备管理列表 */
		getList() {
			this.loading = true;
			listCarDevice(this.queryParams).then(response => {
				this.carDeviceList = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		// 获取车辆列表
		getCars() {
			listCar(this.queryCar).then(response => {
				this.cars = response.rows;
			});
		},
		deviceTypeFormat(row, column) {
			return this.selectDictLabel(this.dataTypeOptions, row.dataType);
		},

		// 状态字典翻译
		statusFormat(row, column) {
			return this.selectDictLabel(this.statusOptions, row.status);
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				deviceID: undefined,

				name: undefined,

				carID: undefined,

				carVin: undefined,

				vender: undefined,

				type: undefined,

				model: undefined,

				interfaceType: undefined,

				dataType: undefined,

				status: undefined,

				lastTransferTime: undefined,

				dataReceiveTime: undefined,

				uid: undefined
			};
			this.resetForm('form');
		},

		parsedate(time) {
			let delayTime = new Date(time).toJSON();
			return new Date(+new Date(delayTime) + 8 * 3600 * 1000)
				.toISOString()
				.replace(/T/g, ' ')
				.replace(/\.[\d]{3}Z/, '');
		},
		/** 搜索按钮操作 */
		handleQuery() {
			if (this.lastDateArr.length > 0) {
				var _date = [];
				this.lastDateArr.forEach(item => {
					_date.push(this.parsedate(item));
				});
				this.queryParams.lastDate = _date.join(',');
			} else {
				this.queryParams.lastDate = undefined;
			}

			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm');

			this.lastDateArr = [];

			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.deviceID);
			this.single = selection.length != 1;
			this.multiple = !selection.length;
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.tableShow = false;
			this.isShow = true;
			this.title = '添加车载设备';
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const deviceID = row.deviceID || this.ids;
			getCarDevice(deviceID).then(response => {
				this.form = response.data;
				this.form.image = process.env.VUE_APP_BASE_API + this.form.image;
				this.tableShow = true;
				this.open = true;
				this.isShow = false;
				this.title = '查看车载设备';

				this.getCarDeviceLog();
				console.log(this.form);
				if (this.form.hsVideoUrl == null || this.form.hsVideoUrl == '') {
					this.tips = true;
				} else {
					this.tips = false;
				}
				switch (this.form.type) {
					case 1:
						// 心电
						this.isType = '1';
						break;
					case 2:
						// 呼吸机
						this.isType = '2';
						break;
					case 3:
						// 飞利浦
						this.isType = '3';
						break;
					case 4:
						// 汇声
						this.isType = '4';
						break;
					default:
						break;
				}
			});
			this.queryParamsforLog.deviceID = deviceID;
			this.getCarDispatchDevice(deviceID);
		},
		// 回放视频列表
		getCarDispatchDevice(n) {
			console.log('--------------------------', n);
			getCarDispatchDevice(n).then(response => {
				console.log(response);
				if (response.data.length == 0) {
					this.$message({
						message: '暂无调度数据',
						type: 'warning'
					});
				}
				this.carDispatchDevice = response.data;
				console.log(response.data);
				if (this.carDispatchDevice[0].hsVideoUrl) {
					this.hsVideoUrl = this.carDispatchDevice[0].hsVideoUrl;
					console.log(this.hsVideoUrl);
				}
				this.xindianUrl = `http://60.205.202.107:8084/new/detail.html?dispatcherId=${response.data[0].dispatchID}&actionFlag=1&color=00184c`;
				this.huxiUrl = `http://60.205.202.107:8084/new/respirators.html?dispatcherId=${response.data[0].dispatchID}&actionFlag=1&color=00184c`;
			});
		},
		getCarDeviceLog() {
			carDeviceList(this.queryParamsforLog).then(response => {
				this.deviceDispathList = response.rows;
				this.totalforLog = response.total;
			});
		},
		/** 提交按钮 */
		submitForm: function() {
			this.$refs['form'].validate(valid => {
				if (valid) {
					if (this.form.deviceID != undefined) {
						updateCarDevice(this.form).then(response => {
							if (response.code === 200) {
								this.msgSuccess('修改成功');
								this.open = false;
								this.isShow = false;
								this.reset();
								this.getList();
							} else {
								this.msgError(response.msg);
							}
						});
					} else {
						addCarDevice(this.form).then(response => {
							if (response.code === 200) {
								this.msgSuccess('新增成功');
								this.open = false;
								this.getList();
							} else {
								this.msgError(response.msg);
							}
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const deviceIDs = row.deviceID || this.ids;
			this.$confirm('是否确认删除车载设备管理编号为"' + deviceIDs + '"的数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(function() {
					return delCarDevice(deviceIDs);
				})
				.then(() => {
					this.getList();
					this.msgSuccess('删除成功');
				})
				.catch(function() {});
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams;
			this.$confirm('是否确认导出所有车载设备管理数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(function() {
					return exportCarDevice(queryParams);
				})
				.then(response => {
					this.download(response.msg);
				})
				.catch(function() {});
		},
		handleChange() {
			this.isShow = !this.isShow;
		},
		Oncancel() {
			this.visible = false;
		},
		OnConfirm() {
			unbundleCarDevice(this.form).then(response => {
				if (response.code === 200) {
					this.msgSuccess('解绑成功');
					this.open = false;
					this.visible = false;
					this.getList();
				} else {
					this.msgError(response.msg);
				}
			});
		},
		//点击列表切换视频 n索引
		onplayer(n, item) {
			console.log(this.tips);
			// if (this.tips == true) {
			// 	this.$message({
			// 		message: '暂无历史数据',
			// 		type: 'warning'
			// 	});
			// 	return;
			// } else {
				this.playback = true
				if (n) {
					this.isAddStyle = n;
					this.xindianUrl = `http://60.205.202.107:8084/new/detail.html?dispatcherId=${item.dispatchID}&actionFlag=1&color=00184c`;
					this.huxiUrl = `http://60.205.202.107:8084/new/respirator.html?dispatcherId=${item.dispatchID}&actionFlag=1&color=00184c`;
					this.hsVideoUrl = this.carDispatchDevice[n].hsVideoUrl;
				}
				if (this.hsVideoUrl != null) {
					setTimeout(() => {
						this.player = document.getElementById('videoElement');
						if (flvjs.isSupported()) {
							let flvPlayer = flvjs.createPlayer({
								type: 'flv',
								url: this.hsVideoUrl
							});
							flvPlayer.attachMediaElement(videoElement);
							flvPlayer.load(); //加载
							this.player.play(); //播放
							console.log(this.hsVideoUrl);
						}
					}, 100);
				}

		},
    // 图片校验
    field105BeforeUpload(file) {
      const isRightSize = file.size / 1024 / 1024 < 5;
      if (!isRightSize) {
        this.$message.error("文件大小超过 5MB");
      }
      const isAccept = new RegExp("image/*").test(file.type);
      if (!isAccept) {
        this.$message.error("应该选择image/*类型的文件");
      }
      return isRightSize && isAccept;
    },
    // 图片上传成功处理
    quillImgSuccess(res, file) {
      // res为图片服务器返回的数据
      // 如果上传成功
      if (res.code === 200) {
        // 获取光标所在位置xx
        this.form.image = res.fileName;
        // this.fieldfileList.push(res.url)
        this.$message.success("上传成功");
      } else {
        this.$message.error("图片插入失败");
      }
    },
    // 删除图片操作
    removeFormImage(row) {
      this.form.image = null;
    },
	}
};
</script>
<style lang="scss">
/* 分页 */
.pagination-container {
	height: 80px;
	margin-top: 0px;
	padding: 23px 20px !important;
}

/* 分页  end */
.el-select {
	width: 100%;
}

.carDevice-datail {
	width: 100%;
	height: calc(100vh - 150px);
	overflow: auto;

	.carDevice-datail-cont {
		width: 100%;
		height: 100%;
		background: #ffffff;
		box-sizing: border-box;

		b {
			position: relative;
			z-index: 10;
			cursor: pointer;
			font-weight: 400;
			float: right;
		}

		.datail-header {
			width: 100%;
			height: 30px;
			margin-bottom: 60px;

			.datail-header-title {
				height: 30px;
				font-size: 24px;
				font-family: MicrosoftYaHei;
				color: rgba(51, 51, 51, 1);
				line-height: 30px;
				padding-left: 30px;
				background: url('../../../../src/assets/image/Fill1.png') no-repeat;
				background-position: 10px 7px;
				cursor: pointer;
			}

			.datail-header-operation {
				height: 30px;
				font-size: 18px;
				font-family: MicrosoftYaHei;
				color: rgba(51, 51, 51, 1);
				line-height: 30px;
				text-align: right;
				cursor: pointer;
			}
		}

		.datail-box {
			.datail-box-img {
				width: 364px;
				height: 216px;
				background: rgba(249, 249, 249, 1);
			}

			.datail-box-list {
				margin-bottom: 25px;
				height: 36px;
				font-size: 18px;
				font-family: MicrosoftYaHei;
				line-height: 36px;

				> div {
					height: 36px;
					font-size: 18px;
					font-family: MicrosoftYaHei;
					color: #3e95f0;
					line-height: 36px;

					.datail-box-list-trtle {
						color: #333333;
					}

					.datail-box-list-cont {
						color: #3e95f0;
					}
				}
			}
		}

		.datail-footer {
			height: 18px;
			font-size: 18px;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 18px;

			.datail-footer-title {
				margin: 60px 0 40px 0;
			}
		}
	}
}
.playback {
	height: calc(100vh - 150px);
	.palyback-header {
		height: 40px;
		.playback-box {
			font-size: 18px;
			line-height: 40px;
			.playback-box-title {
				color: #333;
			}
			.playback-box-cont {
				color: #3e95f0;
			}
		}
	}
	.palyback-conter {
		border: 1px solid #e3e3e3;
		height: calc(100% - 40px);
		display: flex;
		.palyback-conter-left {
			width: 1400px;
			flex: 1;
			margin: 0 10px;
			background-color: #f8f8f8;
			.palyback-conter-left-header {
			}
			.palyback-conter-left-conter {
				width: 1400px;
				display: flex;
				flex-wrap: wrap;
				height: 100%;
				background: #e3e3e3;
				.palyback-conter-left-conter-list {
					flex: 1;
					.playback-list-header {
						display: flex;
						justify-content: space-between;
						padding: 5px;
						box-sizing: border-box;
						font-size: 12px;
					}
					.playback-list-conter {
						font-size: 28px;
						height: 28px;
						line-height: 28px;
						font-weight: 600;
					}
				}
			}
		}
		.palyback-conter-right {
			width: 450px;
			border-left: 1px solid rgba(213, 213, 213, 1);
			box-sizing: border-box;
			.palyback-conter-right-list {
				height: 100%;
				overflow: auto;
				.palyback-conter-right-box {
					width: 100%;
					height: 113px;
					background-color: #e8e8e8;
					padding: 10px;
					box-sizing: border-box;
					color: #333333;
					cursor: pointer;
					.box-header {
						display: flex;
						justify-content: space-between;
						margin-bottom: 10px;
						font-size: 14px;
						line-height: 14px;
					}
					.box-footer {
						margin-top: 60px;
						display: flex;
						justify-content: space-between;
						font-size: 18px;
						font-size: 18px;
						> div:nth-child(1) {
							padding-left: 30px;
							box-sizing: border-box;
						}
						> div:nth-child(2) {
							width: 100px;
							padding-left: 20px;
							box-sizing: border-box;
							text-align: right;
						}
					}
				}
			}
		}
	}
	.addStyle {
		background: #4397f0 !important;
		color: #ffffff !important;
	}
}
</style>
